<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>amCharts example</title>
		
        <style>
          body{
          	background-color: #EEEEEE;
          	font-family: Arial;
          	font-size: 12px;
          }
        </style>		
		
	</head>

	<body style="background-color:#EEEEEE">
		<p><font color="#CC0000"><b>Atention! This example will work only on web server!</b></font></p>
		<!-- saved from url=(0013)about:internet -->
		<!-- amcharts script-->
		<!-- swf object (version 2.2) is used to detect if flash is installed and include swf in the page -->
		<script type="text/javascript" src="../../../../amcharts/flash/swfobject.js"></script>

		<!-- chart is placed in this div. if you have more than one chart on a page, give unique id for each div -->
		<div id="xy"></div>

	    <script type="text/javascript">
	    
            var params = {
                bgcolor:"#FFFFFF"
                };

		    var flashVars = {
		        path: "../../../../amcharts/flash/",
		        settings_file: "settings.xml",
		        data_file: "data.xml",
		        chart_id:"xy"
			};

	    	swfobject.embedSWF("../../../../amcharts/flash/amxy.swf", "xy", "600", "400", "8.0.0", "../../../../amcharts/flash/expressInstall.swf", flashVars, params);
        
        
            //////////////////////////////////////////////////////////////////////////////////////////
            // Functions that control the chart //////////////////////////////////////////////////////
            //////////////////////////////////////////////////////////////////////////////////////////
            
            // SET DATA //////////////////////////////////////////////////////////////////////////////
            // flashMovie.setData(data)
            // This function can be used for setting the chart's data on the fly. 
            // Data must be in CSV or XML form, as per the <data_type> setting.
            function setData() {
              // gets data from the text area with id "data"
              var data = document.getElementById("data").value;
              // sets data
              flashMovie.setData(data);
            }
            
            // APPEND DATA ///////////////////////////////////////////////////////////////////////////
            // flashMovie.appendData(data[, remove_count])
            // This function can be used to append new data to the existing dataset. 
            // The data must be in CSV or XML form, as per the <data_type> setting. 
            // The remove_count variable is optional and sets the number of data points
            // that should be removed from the beginning of dataset.
            function appendData() {
              // gets data from the text area with id "data"
              var data = document.getElementById("data").value;
              // appends data
              flashMovie.appendData(data, 0);
            }
            
            // SET SETTINGS //////////////////////////////////////////////////////////////////////////
            // flashMove.setSettings(settings[, rebuild])
            // This function can be used to set some part or all the settings. The settings should be
            // in XML format, inside <settings></settings>. The "rebuild" parameter is optional and 
            // can be "true" or "false". "false" means that the new settings will not be applied right
            // after this function is called. They will can be applied using flashMovie.rebuild()
            // function or by adding some more setings with the "rebuild" set to "true". The default
            // value of "rebuild" is "true"  
            function setSettings() {
              var settings = document.getElementById("settings").value;
              flashMovie.setSettings(settings, true);
            }   
            
            // REBUILD CHART /////////////////////////////////////////////////////////////////////////
            // flashMovie.rebuild();
            // This function might be used to rebuild the chart after several portions of settings were
            // set using setSettings(settings, rebuild) function, with the rebuild set to false
            function rebuild() {
              flashMovie.rebuild();
            }
            
            // RELOAD DATA ///////////////////////////////////////////////////////////////////////////
            // flashMove.reloadData([file_name])
            // This function will reload the data. The file_name variable is optional, if you do not
            // set it here, data from the original file will be reloaded.       
            function reloadData() {
              flashMovie.reloadData(); 
            }
            
            // RELOAD SETTINGS ///////////////////////////////////////////////////////////////////////
            // flashMovie.reloadSettings([file_name])
            // This function will reload the settings. The file_name variable is optional, if you do
            // not set it here, settings from the original file will be reloaded. 
            function reloadSettings() {
              flashMovie.reloadSettings();
            }
            
            // RELOAD ALL ////////////////////////////////////////////////////////////////////////////
            // flashMovie.reloadAll([data_file_name][,settings_file_name])
            // This function will reload both data and settings. The names of the files are optional. 
            // If you do not set them, the original file names will be used.
            function reloadAll() {
              flashMovie.reloadAll();
            }
            
            // SET PARAM /////////////////////////////////////////////////////////////////////////////
            // flashMovie.setParam(param, value)
            // This function lets you change a single setting. The parameter names are formed using 
            // the section name and the parameter name, separated with a period. For example: 
            // background.alpha or labels.label[1].text 
            function setParam() {
              // gets param name from a field with id "param"
              var param = document.getElementById("param").value;
              // gets param value from a field with id "value"
              var value = document.getElementById("value").value;
              // sets param
              flashMovie.setParam(param, value);
            }
                  
            // GET PARAM /////////////////////////////////////////////////////////////////////////////
            // flashMovie.getParam(param)
            // This function will ask Flash to return the value of a setting. The parameter name is
            // formed in the same way as the setParam function (described above). When you call this
            // function to return the setting value, Flash will return the value by calling the 
            // amReturnParam(chart_id, param_value, param_name) function
            function getParam() {
              // get the param name from a field with id "getparam"
              var param = document.getElementById("getparam").value;            
              flashMovie.getParam(param);
            } 
            
            // GET DATA //////////////////////////////////////////////////////////////////////////////
            // flashMovie.getData()
            // This function will ask Flash to return the whole data. When you call this function to
            // return the data, Flash will call the amReturnData(chart_id, data) function.
            function getData() {
              flashMovie.getData();
            }   
                  
            // GET SETTINGS //////////////////////////////////////////////////////////////////////////
            // flashMovie.getSettings()
            // This function will ask Flash to return the whole settings XML. When you call this 
            // function to return the settings, Flash will call the 
            // amReturnSettings(chart_id, settings) function. 
            function getSettings() {
              flashMovie.getSettings();
            }   
                  
            // EXPORT AS IMAGE ///////////////////////////////////////////////////////////////////////
            // flashMovie.exportImage([file_name]) 
            // This function will start the process of exporting the chart as an image. The file_name
            // is a name of a file to which image data will be posted (files provided in the download 
            // package are export.php and export.aspx). The file_name is optional and can be set in 
            // the <export_as_image><file> setting.
            function exportImage() {
              flashMovie.exportImage('../../amxy/export.php');  
            }
            
            // PRINT /////////////////////////////////////////////////////////////////////////////////
            // flashMovie.print()
            // This function will print the chart. Use this print function if you don't have any
            // values rotated by 90 degrees, also if you don't have a custom bitmap background.
            function print(){
              flashMovie.print();
            }
                  
            // PRINT AS BITMAP ///////////////////////////////////////////////////////////////////////
            // flashMovie.printAsBitmap()
            // Use it if you have values rotated by 90 degrees and/or a custom bitmap background.
            function printAsBitmap(){
              flashMovie.printAsBitmap();
            }
            
            // SET ZOOM //////////////////////////////////////////////////////////////////////////////
            // flashMovie.setZoom(left, right, bottom, top)
            // This function will set the zoom bounds to the chart.
            function setZoom(){
              var left = document.getElementById("left").value;
              var right = document.getElementById("right").value;
              var bottom = document.getElementById("bottom").value;
              var top = document.getElementById("top").value;      
              flashMovie.setZoom(left, right, bottom, top); 
            }
            
            // SHOW ALL //////////////////////////////////////////////////////////////////////////////
            // flashMovie.showAll();
            // This function will show the full chart if some shorter period was previously selected.
            function showAll(){
              flashMovie.showAll(); 
            }
            
            //////////////////////////////////////////////////////////////////////////////////////////
            // Functions that are called by the chart ////////////////////////////////////////////////
            //////////////////////////////////////////////////////////////////////////////////////////
                  
            // CHART INITED //////////////////////////////////////////////////////////////////////////    
            // amChartInited(chart_id)
            // This function is called when the chart is fully loaded and initialized.
            function amChartInited(chart_id){
              // get the flash object into "flashMovie" variable   
              flashMovie = document.getElementById(chart_id);
              // tell the field with id "chartfinished" that this chart was initialized
              document.getElementById("chartfinished").value = chart_id;           
            }      
            
            // PROCESS COMPLETED //////////////////////////////////////////////////////////////////////////    
            // amProcessCompleted(chart_id, process_name)
            // This function is called when the chart finishes doing some task triggered by another 
            // JavaScript function 
            function amProcessCompleted(chart_id, process_name){
              document.getElementById("processcompleted").value = process_name;           
            }
                  
            // RETURN DATA ///////////////////////////////////////////////////////////////////////////
            // amReturnData(chart_id, data)
            // This function is called when you request data from a chart 
            //  by calling the flashMove.getData() function.
            function amReturnData(chart_id, data){
              document.getElementById("data").value = unescape(data);
            }
            
            // RETURN PARAM //////////////////////////////////////////////////////////////////////////
            // amReturnParam(chart_id, value, param_name)
            // This function is called when you request a setting from a chart  
            // by calling the flashMovie.getParam(param) function.
            function amReturnParam(chart_id, value, param_name){
              document.getElementById("returnedparam").value = unescape(value);
            }
            
            // RETURN SETTINGS ///////////////////////////////////////////////////////////////////////
            // amReturnSettings(chart_id, settings)
            // This function is called when you request settings from a chart 
            // by calling flashMovie.getSettings() function.  
            function amReturnSettings(chart_id, settings){
              document.getElementById("settings").value = unescape(settings);
            }      
            
            // RETURN IMAGE DATA /////////////////////////////////////////////////////////////////////
            // amReturnImageData(chart_id, data)
            // This function is called when the export to image process is finished and might be used
            // as alternative way to get image data (instead of posting it to some file)
            function amReturnImageData(chart_id, data){
              // your own functions here
            }
            
            // FIND WHICH BULLET WAS CLICKED //////////////////////////////////////////////////
            // amClickedOnBullet(chart_id, graph_index, value, x, y, url, description)
            // This function is called when the viewer clicks on a graph bullet. It returns the
            // sequential number of a graph (graph_index), the value of the data point (value),
            // the axis name (axis), the URL and the description attributes.
            function amClickedOnBullet(chart_id, graph_index, value, x, y, url, description){
              document.getElementById("bullet_clicked").value = value;
            }          
            // FIND WHICH BULLET WAS HOVERED /////////////////////////////////////////////////
            // amRolledOverBullet(chart_id, graph_index, value, x, y, url, description)
            // This function is called when the viewer rolls over a graph bullet. It returns the 
            // sequential number of a graph (graph_index), the value of the data point (value), 
            // the axis name (axis), the URL and the description attributes.
            function amRolledOverBullet(chart_id, graph_index, value, x, y, url, description){
              document.getElementById("bullet_hover").value = value;
            }
            
            
            // ERROR /////////////////////////////////////////////////////////////////////////////////
            // amError(chart_id, message)
            // This function is called when an error occurs, such as no data, or file not found.
            function amError(chart_id, message){
              alert(message);
            }
            
            // GET ZOOM //////////////////////////////////////////////////////////////////////////////
            // amGetZoom(chart_id, left, right, bottom, top)
            // This function is called when the zoom (selection) is changed
            function amGetZoom(chart_id, left, right, bottom, top){
              document.getElementById("left").value = left;
              document.getElementById("right").value = right;
              document.getElementById("bottom").value = bottom;
              document.getElementById("top").value = top;    
            }
        </script>


        <!-- Buttons and forms -->
        
        <form>
            <hr noshade size="1">
            Chart initialized: <input type="text" id="chartfinished">
            Process completed: <input type="text" id="processcompleted">
            <hr noshade size="1">
          
            <input type="button" value="reload Data" onclick="reloadData();" />
            <input type="button" value="reload Settings" onclick="reloadSettings();" />
            <input type="button" value="reload All" onclick="reloadAll();" />
            <hr noshade size="1">    
          
            <input type="button" value="export image" onclick="exportImage();" />            	    
            <input type="button" value="print" onclick="print();" />
            <input type="button" value="print as bitmap" onclick="printAsBitmap();" />
            <hr noshade size="1">	
            
            <textarea id="data" rows="6" cols="62"></textarea><br>
            <input type="button" value="Get data" onclick="getData();" />
            <input type="button" value="Set Data" onclick="setData();" />
            <input type="button" value="Append Data" onclick="appendData();" />  
            <hr noshade size="1">	 
            
            Rolled over bullet:<input type="text" id="bullet_hover">
            Clicked on bullet:<input type="text" id="bullet_clicked">      
            <hr noshade size="1">    
          
            Left: <input type="text" id="left" />  		   
            Right: <input type="text" id="right" /><br>
            Top: <input type="text" id="top" />  		   
            Bottom: <input type="text" id="bottom" />
            <input type="button" value="Set Zoom" onclick="setZoom();" />  
            <hr noshade size="1">
            
            Param: <input type="text" id="param" value="background.color"/>
            Value: <input type="text" id="value" value="0xBBBB00"/>
            <input type="button" value="set param" onclick="setParam();" />  
            <hr noshade size="1">   
            
            Param: <input type="text" id="getparam" value="axes.x.width">  		   
            Value: <input type="text" id="returnedparam" />
            <input type="button" value="get param" onclick="getParam();" />  
            <hr noshade size="1">    
            
            <textarea id="settings" rows="6" cols="62"></textarea><br>
            <input type="button" value="Get settings" onclick="getSettings();" />
            <input type="button" value="Set settings" onclick="setSettings();" />
            <input type="button" value="Rebuild" onclick="rebuild();" />  
            <hr noshade size="1">	           		   		   		   
        </form>    
    </body>
</html>
